آزر · 06 · محرك الاشتقاق اللوني

WHY OKLCH · لماذا OKLCH

ليس HSL — OKLCH الإدراكي

المعادلة ليست OKLCH لأنها حديثة — بل لأنها تُنتج انسجاماً رياضياً مستحيلاً في HSL. ثلاثة أسباب محددة:

REASON 01 · السبب الأول

التساوي الإدراكي

في HSL، أخضر بـS=70% يبدو أشد بكثير من أزرق بنفس القيمة. في OKLCH، C=0.17 ينتج نفس "الثقل البصري" بغض النظر عن الهيوية. كل طبقاتنا الخمس لها وزن بصري ثابت عبر كل الألوان.

L=0.44 C=0.17 · 4 هيوات مختلفة · نفس الوزن البصري

REASON 02 · السبب الثاني

الانسجام المضمون

حين يشاركان نفس C (الإشباع)، الألوان تبدو كأنها من "نفس الكون". البنفسجي عند C=0.19 — أي لون نختاره بـC=0.17 سيبدو في نفس الحيّز اللوني وليس غريباً أو متشاكساً معه.

آزر p-500

نفس C — انسجام تلقائي

REASON 03 · السبب الثالث

الفصل الواضح

الحر في OKLCH هو H فقط — الهيوية. L وC ثابتان لكل طبقة. هذا يعني المصمم يتخذ قراراً واحداً فقط: "ما لون هذا المفهوم؟" وليس خمسة قرارات لخمس طبقات.

INPUT: H = 170°

OUTPUT: 5 طبقات جاهزة ← تلقائياً

THE FORMULA · المعادلة

ثلاثة مدخلات — واحد فقط حر

oklch(L_ثابت · C_ثابت · H_حر)
5 طبقات × H واحد = لوحة كاملة

L — Lightness

الإضاءة

0 = أسود كامل · 1 = أبيض كامل. ثابت لكل طبقة — يحدد الفاتح/الداكن.

عميق: 0.28 · قائد: 0.44 · وسيط: 0.60 · فاتح: 0.88 · شبحي: 0.95

C — Chroma

الإشباع

0 = رمادي محايد · 0.37 = أقصى إشباع ممكن. يتناقص للطبقات الأفتح لأن الفاتح يستوعب إشباعاً أقل.

عميق: 0.19 · قائد: 0.17 · وسيط: 0.12 · فاتح: 0.06 · شبحي: 0.025

H — Hue ← الحر

الهيوية

0° إلى 360°. القرار الوحيد للمصمم. المعادلة تولّد 5 طبقات من H واحد.

أي قيمة خارج 260°–340° (منطقة الاستثناء)

5 TIERS · الطبقات الخمس

قيم ثابتة — مرجع التطبيق

الطبقة

المعادلة الثابتة

الدور

الاستخدام

عميق

oklch(0.28 0.19 H°)

الغمر الداكن · لحظة الكشف · الغلاف المظلم

الغلاف الداكن · شريحة كشف المفهوم · خلفية الـstatement

قائد ★

oklch(0.44 0.17 H°)

اللون القائد · الـaccent الأساسي · أعلى استخداماً

العنوان الرئيسي · الرقم الكبير · الـeye dot · الأزرار · الـaccent

وسيط

oklch(0.60 0.12 H°)

الدعم الثانوي · بيانات categorical · أيقونات فرعية

الخط الثانوي في الرسوم البيانية · النقاط الفرعية · الأيقونات

فاتح

oklch(0.88 0.06 H°)

خلفية تظليل · hover state · card background

الـcard الفاتح · خلفية قسم · حالة hover

شبحي

oklch(0.95 0.025 H°)

خلفية الصفحة · pin · أخفى حضور

خلفية الصفحة في القسم الملوّن · بديل الورق مع تلميح لوني

INTERACTIVE ENGINE · المحرك التفاعلي

اسحب الشريط — اللوحة تتولّد فوراً

هذا هو القلب. المنطقة المظلمة (260°–340°) محظورة — تشابه بنفسجي آزر. المعادلة: |H − 300| ≥ 40°. انقر أي لون للنسخ.

COLOR DERIVATION ENGINE · محرك الاشتقاق

H = 160° teal · رقمي

محظور · آزر Zone

✓ منسجم — حساب...

عميق · Deep

غمر · كشف

قائد ★ · Primary

accent · عنوان

وسيط · Mid

ثانوي · بيانات

فاتح · Light

خلفية · hover

شبحي · Ghost

خلفية صفحة

01

مفهوم

داكن · Deep + accent

04

INSIGHT

البيانات المحورية

فاتح · Primary كـaccent

المفهوم

رؤية

كشف · Deep كخلفية

EXCLUSION ZONE · منطقة الاستثناء

H = 260° إلى 340° — محظور

هذا النطاق يُنتج ألوان تشبه بنفسجي آزر بصرياً. المعادلة: |H − 300| ≥ 40°. المفهوم يبدو "نسخة أخرى من آزر" بدلاً من كيان مستقل.

⛔ EXCLUDED ZONE · المحظور

H = 260° — 340°

80° من الطيف = ممنوع (22%)

أي H في هذا النطاق ينتج لوناً بنفسجياً مائلاً — قد يكون ورديداً أو أزرق-بنفسجياً. النتيجة: الإطار (آزر البنفسجي) والمحتوى (لون المفهوم) يتنافسان على نفس الهوية.

تشابه مع بنفسجي آزر ← ممنوع

✓ SAFE ZONE · الأمان

H = 0° — 260° + 340° — 360°

280° من الطيف = آمن = 78%

ما يزيد عن ثلاثة أرباع الطيف اللوني آمن تماماً. كل الألوان الكلاسيكية: الأحمر، البرتقالي، الذهبي، الأخضر، الأزرق، التيل — جميعها خارج المنطقة المحظورة.

6 أمثلة من المنطقة الآمنة ← كلها صحيحة

PRESET EXAMPLES · أمثلة جاهزة

5 هيوات جاهزة — سياقات اقتراحية

أمثلة مسبقة الحساب لمفاهيم شائعة. كل لوحة: 5 طبقات من الغمر إلى الشبحي. انقر أي تظليل للنسخ.

ROTATION GUIDE · دليل التحويل

لون العميل في المنطقة المحظورة — ماذا تفعل

1

حدد H لهوية العميل

حوّل لون العميل لـOKLCH واستخرج H.

→ مثال: العميل لونه #7B4FC8 ≈ H=295°

2

هل يقع في 260°–340°؟

295° يقع في المنطقة المحظورة (|H−300| = 5° < 40°). يجب التحويل.

→ 295° ∈ [260°, 340°] ← محظور

3

دوّر بـ+60° أو −60°

295° + 60° = 355° ✓ آمن. أو 295° − 60° = 235° ✓ آمن. اختر الأقرب لروح المفهوم.

→ H=355° (دافئ أكثر) أو H=235° (بارد أكثر)

4

ولّد اللوحة من H الجديد

اللوحة ليست لون العميل — هي لون المفهوم الذي تقدمه أنت عنه.

→ oklch(0.44 0.17 355°) = اللون القائد الجديد

مرئياً

H=295° ✕

لون العميل الأصلي
يشبه آزر

+60°

H=355° ✓

لون المفهوم الجديد
آمن ومنسجم

DON'TS · المحظورات

أخطاء الاشتقاق الشائعة

✕ محظور 01

لا تغيّر L أو C بيدك

الثوابت موجودة لسبب — تضمن انسجام كل الطبقات. إذا غيّرت L أو C لطبقة واحدة، اللوحة كلها تفقد تناسقها. إذا أردت لوناً مختلفاً، غيّر H فقط.

✕ محظور 02

لا تنسخ لون العميل مباشرة دون تحقق

لون العميل (hex من موقعه) غالباً له L وC مختلف. إذا استخدمته كـaccent مباشرة تفقد التناسق مع الطبقات الأخرى. حوّله لـOKLCH، استخرج H، طبّق المعادلة.

✕ محظور 03

لا تستخدم لونين قائدين في نفس المخرج

المحرك يُنتج لوحة لـH واحد. لونان "قائدان" من H مختلفين = مفهومان — وهذا مخرجان. ملف واحد = H واحد = 5 طبقات = لوحة واحدة.

✕ محظور 04

لا تستخدم الطبقة "الشبحية" كـaccent

الشبحية (L=0.95) مصممة للخلفيات والـpin. استخدامها كـaccent يجعلها تختفي تقريباً. الـaccent هو القائد دائماً (L=0.44).